<template>
  <view>
    <my-header></my-header>
    <view class="user-card">
      <view class="avatar-container">
        <image
          class="avatar"
          src="/static/default-avatar.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="user-info">
        <text class="user-name">张经理</text>
        <text class="user-position">杭州城北网点 | 高级操作员</text>
      </view>
      <view class="two-card">
        <view class="card">
          <text class="card-value">28</text>
          <text class="card-label">本月任务</text>
        </view>
        <view class="card">
          <text class="card-value">¥2,850</text>
          <text class="card-label">本月收入</text>
        </view>
      </view>
    </view>

    <view class="list-card">
      <!-- 保证金项 -->
      <view
        class="list-three-icon"
        v-for="item in listItems"
        :key="item.id"
        @click="goto(item)"
      >
      <view class="task-icon" :style="{backgroundColor:item.backgroundColor}">
        <uni-icons
          custom-prefix="iconfont"
          :type ='`icon-${item.type}`' 
          size="20"
          :color = "item.color"
        ></uni-icons>
      </view>
        <view class="item-left">
          <text>{{ item.name }}</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    	<swiper class="advertisement" circular :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
  </view>
</template>

<script>
export default {
  name: "DashboardPage",
  data() {
    return {
      // 页面数据
      userInfo: {
        name: "张经理",
        position: "杭州城北网点 | 高级操作员",
      },
      statsData: {
        task: 28,
        income: 2850,
      },
      listItems: [
        {
          id: 1,
          name: "网点位置",
          link: "deposit/deposit",
          color: "#2196F3",
          type: "fuwuwangdian",
          backgroundColor:'#E3F2FD'
        },
        {
          id: 2,
          name: "价格维护",
          link: "price-maintenance/price-maintenance",
          color: "#4CAF50",
          type: "jiageweihu",
          backgroundColor:'#E8F5E9'
        },
        {
          id: 3,
          name: "风险联保",
          link: "risk-assurance/risk-assurance",
          color: "#F44336",
          type: "lianbao",
          backgroundColor:'#FFEBEE'
        },
        {
          id: 4,
          name: "消息通知",
          link: "message/message",
          color: "#9C27B0",
          type: "xiaoxi",
          backgroundColor:'#F3E5F5'
        },
        {
          id: 5,
          name: "网点经营管理制度",
          link: "operating-rules/operating-rules",
          color: "#FFC107", 
          type: "guanlizhidu",
          backgroundColor:'#FFF8E1'
        },
        {
          id: 6,
          name: "统计",
          link: "statistics/statistics",
          color: "#1a6dcc",
          type: "tongji",
          backgroundColor:'#d4e4ff'
        },
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500
    };
  },
  methods: {
    // 导航到保证金页面
    goto(item) {
      uni.navigateTo({
        url:`/pages/user/${item.link}` ,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 卡片通用样式 */
.user-card,
.list-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 用户信息卡片样式 */
.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #e6f7ff;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.user-name {
  font-size: 34rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8rpx;
}

.user-position {
  font-size: 26rpx;
  color: #666666;
}

.advertisement{
  margin:30rpx;
  height:200rpx;
  border-radius:20rpx;
  overflow: hidden;
  .swiper-item{
    height:200rpx;
  }
  .uni-bg-red{
    background: #ff0000;
  }
  .uni-bg-green{
    background: #00ff00;
  }
  .uni-bg-blue{
    background: #0000ff;
  }
}
</style>
